<!--
 * 头像
 * @作者: 陈老师儿~
 * @手机: 18560000860
 -->
<template>
    <view class="pure-avatar" :class="classes" :style="styles" hover-class="hoverClass">
        <image class="pure-avatar-image" :src="avatar" :mode="mode" v-if="isShowAvatar" @error="handleAvatarError" @load="handleAvatarLoad" />
        <image class="pure-avatar-image pure-avatar-image-default" :src="default" :mode="mode" v-else />
        <button
            class="pure-avatar-button"
            @tap.stop="handleClick"
            :open-type="openType"
            @getuserinfo="handleGetUserInfo"
            @getphonenumber="handleGetPhoneNumber"
            @chooseavatar="handleChooseAvatar"
            @login="handleLogin"
        >
            <view class="pure-avatar-edit-icon" v-if="showEdit">
                <pure-icon :name="editIcon"></pure-icon>
            </view>
        </button>
        <view class="pure-avatar-slot">
            <slot></slot>
        </view>
    </view>
</template>

<script>
    import props from "./props.js";
    export default {
        options: {
            // 将自定义节点设置成虚拟的
            // 头条、飞书：因为合并后丢失事件和 'provide/inject'
            // 京东：因为合并后不能合并外层 'class'
            // 百度：因为合并后会在控制台疯狂报警告
            // #ifndef MP-TOUTIAO || MP-LARK || MP-JD || MP-BAIDU
            virtualHost: true,
            // #endif

            // 组件样式隔离
            styleIsolation: "apply-shared",

            // 允许使用多个插槽
            multipleSlots: true,
        },
        props,
        emits: ["onClick", "getuserinfo", "getphonenumber", "chooseavatar", "login", "load", "error"],
        data() {
            return {
                // 头像加载状态
                loadStatus: "loading",
            };
        },
        computed: {
            // classes
            classes() {
                const classes = [];
                return classes;
            },

            // styles
            styles() {
                const styles = [];
                return styles;
            },

            // 是否显示头像
            isShowAvatar() {
                if (this.loadStatus === "fail") return false;
                if (!this.avatar) return false;
                return true;
            },
        },
        methods: {
            // 头像加载成功
            handleAvatarLoad() {
                this.loadStatus = "success";
                this.$emit("load");
            },

            // 头像加载失败
            handleAvatarError() {
                this.loadStatus = "fail";
                this.$emit("error");
            },

            // 点击头像
            handleClick() {
                this.$emit("onClick");
            },

            // 获取用户信息
            handleGetUserInfo(e) {
                this.$emit("getuserinfo", e);
            },

            // 获取手机号
            handleGetPhoneNumber(e) {
                this.$emit("getphonenumber", e);
            },

            // 选择头像
            handleChooseAvatar(e) {
                this.$emit("chooseavatar", e);
            },

            // 登录
            handleLogin(e) {
                this.$emit("login", e);
            },
        },
    };
</script>

<style scoped>
    @import "./style.css";
</style>
